<template>
  <div>
    <div class="text-center text-2xl font-bold mb-[56px]">为了更准确的提供考核服务，请选择学员岗位</div>
    <div class="grid grid-cols-3 gap-3">
      <div class="h-[114px] bg-white p-5 rounded-[6px] w-[200px] cursor-pointer bg-no-repeat bg-auto bg-center"
           :style="{ 'background-image': 'url(' + bg(index) + ')'}"
           v-for="(item,index) in postList" :key="item.id"
           @click="handlePost(item)"
      >{{ item.name }}
      </div>
    </div>
  </div>
</template>
<script setup>
import bg1 from '@/assets/images/Frame_1410067877.png';
import bg2 from '@/assets/images/Frame_1410067883.png';
import bg3 from '@/assets/images/Frame_1410067884.png';
import bg4 from '@/assets/images/Frame_1410067885.png';
import bg5 from '@/assets/images/Frame_1410067888.png';
import bg6 from '@/assets/images/Frame_1410067887.png';
import {onMounted, ref} from 'vue';
import {useRouter} from 'vue-router';
import {userApi} from "@/api/index.js";

const bgArray = [bg1, bg2, bg3, bg4, bg5, bg6];
const bg = (index) => {
  const actualIndex = index % bgArray.length;
  return bgArray[actualIndex];
};

const router = useRouter();
const postList = ref([])

onMounted(() => {
  getDictionaryOptions()
})
/*
* 获取岗位数据
* */
const getDictionaryOptions = () => {
  const params = {
    dtype: 'job'
  }
  userApi.getDictionaryOptions(params).then((data) => {
    postList.value = data || []
  })
}
const handlePost = (row) => {
  router.push({
    path: '/examCourses/assessList',
    query: {
      id: row.id,
      name: row.name
    }
  })
}
</script>

